<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="/static/htm/head" %>
<title>找回密码</title>
<style type="text/css">
	#content {
		position:relative;
		width:70%;
		left:15%;
		top:10%;
	}
	#logo{
		text-align: center;
	}
	#head {
		font-size:15px;
	}
</style>
</head>
<body>
	<div id="logo">
		<a href="index.jsp" title="游戏玩家论坛">
			<img alt="论坛Logo" height="56" src="static/pic/logo.jpg" width="192">
		</a>
	</div>
	  <div id="content">
	  		  <div id="head" style="float:right;">
				  <ul class="nav nav-pills">
			        <li  class="active"><a href="index.jsp">论坛主页</a></li>
			        <li><a href="login">登陆</a></li>
			        <li><a href="register">注册</a></li>
			      </ul>
		      </div>
		      <div id="body" style="clear:both;">
		      <c:choose>
				<c:when test="${step eq 1}">
					<div class="alert alert-info" style="font-size:15px;position:relative;width:50%;left:25%;">
		       		<strong>亲爱的用户</strong> 请输入登陆论坛的<strong>用户名</strong>
		      		</div>
			      	<div style="font-size:15px;position:relative;width:50%;left:25%;">
			      		<form class="form-search" action="forgetpasswd">
				  		<input type="text" class="input-large search-query" id="username" name="username">
				        <button id="next" type="submit" class="btn btn-success"  style="font-size:15px;margin-left: 40px;">&nbsp;&nbsp;第一步&nbsp;&nbsp;</button>
				        </form>
			        </div>
				</c:when>
				<c:when test="${step eq 2}">
					<div class="alert alert-info" style="font-size:15px;position:relative;width:50%;left:25%;">
		       			<strong>亲爱的用户</strong> 请输入图片上的<strong>验证码</strong> <img src="checkcode" id="createCheckCode"/><a href="#" onclick="return myReload();">不清楚？换一个</a>
		      		</div>
			      	<div style="font-size:15px;position:relative;width:50%;left:25%;">
			      		<form class="form-search" action="forgetpasswd" method="post">
					  		<input type="text" id="checkcode" class="input-large search-query" maxlength="4" name="checkCode">
					        <button type="submit" id="finish" class="btn btn-success"  style="font-size:15px;margin-left: 40px;">&nbsp;&nbsp;第二步&nbsp;&nbsp;</button>
				        </form>
			   		</div>
				</c:when>
			</c:choose>
	        </div>
	        <div id="footer" style="font-size:15px;position:relative;width:50%;left:25%;margin-top: 30px;">
	        	<div class="alert alert-error" id="error_info" style="visibility: ${visibility}">
					${reason}
				</div>
	        </div>
	  </div>  
	  <%@ include file="/static/htm/foot.jsp" %>
</body>
<script type="text/javascript">
	 function myReload(){
		document.getElementById("createCheckCode").src=document.getElementById("createCheckCode").src+"?nocache="+new Date().getTime();
		return false;
	}
</script>
<script type="text/javascript">
$(document).ready(function(){
	if($("#error_info").css("visibility") == "hidden") {
		$("#error_info").hide();
	}
	$("#next").click(function(){
		var username = $("#username").val();
		var re = /[a-zA-Z0-9]{6,30}/;
		if(!re.test(username)) {
				$("#error_info").css("visibility","visible");
				$("#error_info").text("用户名输入不正确。");
				$("#error_info").show();
				return false;
		}
		else {
			return true;
		}
	});
	$("#username").focus(function(){
		$("#error_info").hide();
	});
	$("#finish").click(function(){
		var checkCode = $("#checkcode").val();
		if(checkCode.length < 4) {
			$("#error_info").css("visibility","visible");
			$("#error_info").text("验证码输入不正确。");
			$("#error_info").show();
			return false;
		}
		else {
			return true;
		}
	});
	$("#email").focus(function(){
		$("#error_info").hide();
	});
});
</script>
</html>